<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>method实现-不推荐</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id = "root">
       姓： <input type="text" v-model="firstName"> <br/><br/>
       名： <input type="text" v-model="lastName"> <br/><br/>
       <!--表达式尽量简短-->
       <!--只要data中的数据改变，vm模板就会重写解析，所以就会调用fullName方法-->
       全名：<span>{{fullName()}}</span>
    </div>
</body>
<script type="text/javascript">
   
    new Vue({
      el:'#root', 
      data: { 
        firstName:'张',
        lastName: '三'
      },
      methods: {
        fullName(){
          return this.firstName +'-'+this.lastName;
        }
      },
      
      
    })
</script>
</html>